import { remove } from 'lodash'; import { url } from 'inspector';
<!--
 * @Description:
 * @Date: 2023-11-01 20:43:07
 * @LastEditTime: 2023-11-02 00:10:26
-->
<script setup>
import { defineProps, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
import uDialogModal from '../listDialog/listDialog';
const vClickOutside = {
  mounted(el, binding) {
    function eventHandler(e) {
      if (el.contains(e.target)) {
        return false;
      }
      // 如果绑定的参数是函数，正常情况也应该是函数，执行
      if (binding.value && typeof binding.value === 'function') {
        binding.value(e);
      }
    }
    // 用于销毁前注销事件监听
    el.__click_outside__ = eventHandler;
    // 添加事件监听
    document.addEventListener('click', eventHandler);
  },
  unmounted(el) {
    // 移除事件监听
    document.removeEventListener('click', el.__click_outside__);
    // 删除无用属性
    delete el.__click_outside__;
  }
};
const onClickOutside = () => {
  console.log();
  proxy.$attrs.cancelButton();
  //showPop.value = false;
  console.log('点击了外部 DOM');
};
const props = defineProps({
	title: {
		type: String,
		default: '提示'
	},
	content: {
		type: String,
		default: ''
	},
	className: {
		type: String,
		default: 'text-center'
	},
	cancelButtonText: {
		type: String,
		default: '取消'
	},
	okButtonText: {
		type: String,
		default: '确定'
	},
	okButton: {
		type: Function
	},
	cancelButton: {
		type: Function
	}
});

function close() {
	proxy.$el.remove();
	setTimeout(() => {
		uDialogModal()
			.then(() => {
				console.log('成功逻辑');
			})
			.catch(err => {
				console.log('失败逻辑');
			});
	}, 0);
}
</script>

<template>
	<div class="flowDialog" >
		<div class="flowDialog-title">A党支部</div>
		<div class="flowDialog-content">
			<div class="flowDialog-content-msg">
				<div>
					<span>现有党员</span>
					<span>140人</span>
				</div>
				<div>
					<span>流入党员</span>
					<span>40人</span>
				</div>
				<div>
					<span>流出党员</span>
					<span>10人</span>
				</div>
			</div>
			<div class="flowDialog-content-skip" @click="close">查看流动党员表</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.flowDialog {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 300px;
	height: 215px;
	background: #60151a;
	border: 1px solid rgb(255 147 38 / 35%);
	.flowDialog-title {
		width: 100%;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #d5c7a6;
		background-image: url('../../assets/dTitle.png');
	}
	.flowDialog-content {
		padding: 20px;
		flex: 1;
		.flowDialog-content-msg {
			width: 100%;
			display: flex;
			justify-content: space-between;
			div {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				span:nth-child(1) {
					font-size: 14px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #fff6d1;
				}
				span:nth-child(2) {
					font-size: 24px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #fff6d1;
					margin-top: 15px;
				}
			}
		}
	}
	.flowDialog-content-skip {
		width: 221px;
		height: 37px;
		margin-top: 20px;
		line-height: 37px;
		text-align: center;
		background: rgba(0, 0, 0, 0.12);
		border: 1px solid #ffc955;
		border-radius: 6px;
		color: #fec845;
	}
}
</style>
